import React from 'react'
import './StyleExact.css'

function StyleExact(props) {
    let colorNLabels = [] ;
    for(let i = 0 ; i<props.styleObj.colors.length;++i )
    {
        const item = props.styleObj.colors[i];
        let tmpObj = {} ;
        tmpObj.color = 'rgba('+ item.r.toString() + ','+ item.g.toString() + ','+ item.b.toString() + ','+ (item.a/255.0).toString()+ ')';
        tmpObj.lbl = item.lbl;
        colorNLabels.push(tmpObj);
    }

    return (
        <>
          <div>波段{props.styleObj.bands[0]+1}</div>
            {
                colorNLabels.map((item,index)=>(
                    <div className='StyleExactCell' key={'key'+index} >
                        <div style={{backgroundColor:item.color, height:'16px'}}></div>
                        <div>{item.lbl}</div>
                    </div>
                ))
            }
            <div style={{clear:'both'}}></div>
        </>
    )
}

export default StyleExact
